<template>
	<view class="container">
		<view class="u-p-30 u-type-white-bg u-radius-10 black u-m-b-30" v-for="(item,index) in detail" :key="item.id">
			<view class="u-m-b-70 u-font-30 ">{{`(${item.is_type}题)${index+1 + '、'+item.topic}` }}</view>
			<view v-if="item.type == 1">
				<view class="u-p-30 u-font-26 selectBg u-radius-10 u-m-t-30" :class="{selected: item.option == t.option, error: item.answer == t.option}" v-for="(t,i) in item.options" :key="t.id">
					{{t.option + '、'}}{{t.detail}}
				</view>
			</view>
			<view v-else>  
				<view class="u-p-30 u-font-26 selectBg u-radius-10 u-m-t-30" :class="{selected: item.option == t.option,error: item.answer == '×' ? 'B' : 'A' == t.option}" v-for="(t,i) in item.options" :key="t.id">
					{{t.detail}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				detail:[]
			}
		},

		onLoad({record_id}) {
			this.findAnswer(record_id)
		},
		methods: {
			findAnswer(record_id){
				this.$u.api.findAnswer({record_id}).then(res => {
					this.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
	}
	.selectBg{
		background: #f7f7ff;
		&.selected{
			background: #CCEAE3 !important;
		}
		&.error{
			background: #F0D9D9;
		}
	}
</style>